import React, { Component } from 'react'
import TodoHeader from './components/TodoHeader'
// import TodoInput from './components/TodoInput'
import TodoInput from './components/TodoInput-Context'
import TodoList from './components/TodoList'
import { Provider } from './utils/TodoContext'
import withFooter from './utils/with-footer'

class App extends Component {

  // constructor(props) {
  //   super(props)
  //   this.state = {
  //     todos: Array(6).fill(null).map((v, i) => ({
  //       id: i + 1,
  //       title: '待办事项' + (i + 1),
  //       completed: true
  //     }))
  //   }
  //   this.addTodoItem = this.addTodoItem.bind(this)
  // }

  // 在 state 中存放的是组件内部自身私有使用到的数据，类似于 Vue 组件中的 data
  // 相当于是 constructor 构造函数中 this.state = {}
  state = {
    todos: Array(6).fill(null).map((v, i) => ({
      id: i + 1,
      title: '待办事项' + (i + 1),
      completed: true
    }))
    // todos: []
  }

  /**
   * 组件挂载后调用
   */
  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/todos?userId=1')
      .then(res => res.json())
      .then(data => {
        // console.log('数据：', data)
        this.setState({
          todos: data
        })
      })
  }

  /**
   * 添加待办事项
   * @param {*} title 
   */
  addTodoItem = (title) => {
    // 必须调用 this.setState() 方法来修改状态数据
    // 这样视图中才会响应式渲染修改后的数据内容
    this.setState({
      todos: [
        ...this.state.todos,
        {
          id: Math.random(),
          title,
          completed: false,
        },
      ]
    })
  }
  // addTodoItem(title) {
  //   // 必须调用 this.setState() 方法来修改状态数据
  //   // 这样视图中才会响应式渲染修改后的数据内容
  //   this.setState({
  //     todos: [
  //       ...this.state.todos,
  //       {
  //         id: Math.random(),
  //         title,
  //         completed: false,
  //       },
  //     ]
  //   })
  // }

  /**
   * 修改待办事项状态
   * @param {*} id 
   */
  toggleTodoItem = id => {
    this.setState({
      todos: this.state.todos.map(todo => {
        if (todo.id === id) {
          todo.completed = !todo.completed
        }
        return todo
      })
    })
  }

  /**
   * 删除待办事项
   * @param {*} id 
   */
  removeTodoItem = id => {
    this.setState({
      todos: this.state.todos.filter(todo => todo.id !== id)
    })
  }

  render() {
    return (
      <Provider value={{
        add: this.addTodoItem,
        toggle: this.toggleTodoItem,
        remove: this.removeTodoItem,
      }}>
        <TodoHeader title="待办事项列表" subtitle="ToDoList..."></TodoHeader>

        {/* <TodoInput onAdd={this.addTodoItem} /> */}
        <TodoInput />

        <TodoList todos={ this.state.todos } />
      </Provider>
    )
  }
}

export default withFooter(App)
